<template>
    <footer>
        <ul>
      <!-- vue-router 声明式导航 -->
      <li>
        <router-link to="/films" active-class="kerwinactive" class="icon">
          <i class="iconfont icon-dianying"></i>
            <span>电影</span>
        </router-link>
      </li>

      <li>
        <router-link to="/cinemas" active-class="kerwinactive" class="icon">
          <i class="iconfont icon-yingyuan"></i>
            <span>影院</span>
        </router-link>
      </li>

      <li>
        <router-link to="/center" active-class="kerwinactive" class="icon">
          <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </router-link>
      </li>
    </ul>
    </footer>

</template>
<style lang="scss" scoped>
   footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.0625rem;
    background: white;
    z-index: 10;
    ul {
        display: flex;
        list-style: none;
        li{
            flex: 1;
            line-height: 1.5625rem;
            text-align: center;
            .icon{
              display: flex;
              flex-direction: column;
              i{
                font-size: 20px;
              }
              span{
                font-size: 16px;
              }
            }
        }
    }
    .kerwinactive{
    color: red;
  }
   }
</style>
